import React, { Component } from 'react';

import { Flex} from 'antd-mobile';
import { List, Button} from 'antd-mobile';
import { get } from '../api/getData';
import { Link } from 'react-router-dom';

import 'antd-mobile/lib/flex/style/index';
import 'antd-mobile/lib/list/style/index';
import 'antd-mobile/lib/badge/style/index';
import 'antd-mobile/lib/button/style/index';


import '../allStyle.css';

class User extends Component{
    state = {
        disabled: false,
        user : {
            nick_name: '未登录',
            headimgurl: 'http://thirdwx.qlogo.cn/mmopen/ajNVdqHZLLC1KB9lXAY3JlHgRLvtswg1WaoG0l3VJVb5aSp38UM1TKcg6GOvwScVWB0EPxJubpmEgSISZ45Lgw/132',
            balance: 0,
            commission: 0
        }
    }

    componentDidMount(){
        let _this = this;
        get('/api/user', {}, function (error, data) {
            if(null === error){
                _this.setState({
                    user: data
                });
            }
        });
        document.title = '代理中心';
    }
    render(){
        const Item = List.Item;
        const Brief = Item.Brief;
        return(
            <div style={{fontFamily:'微软雅黑',}}>
                <List  className="my-list" >
                    <Item
                        thumb={this.state.user.headimgurl}
                        arrow="horizontal"
                        multipleLine
                        onClick={() => {}}
                    >
                    <Flex wrap="wrap">
                        <span>{this.state.user.nick_name}<Brief>个人信息</Brief></span>
                    </Flex>
                    </Item>
                </List>
                <Link to={`/Order`}>
                    <List style={{marginTop:'15px'}}>
                        <Item arrow="horizontal" onClick={() => {}} style={{color:'green'}}>
                            <Flex wrap="wrap">
                                <span>推广订单明细</span>
                            </Flex>
                        </Item>
                    </List>
                </Link>
                <List style={{marginTop:'15px'}}>
                    <Item>
                        <Flex wrap="wrap">
                            <span>账户佣金<Brief style={{color:'red'}}>¥ {this.state.user.commission}</Brief></span>
                        </Flex>
                    </Item>
                    <Item
                        extra={<Link to='/Payment'><Button type="ghost" size="small" inline>提现</Button></Link>}
                        multipleLine
                        onClick={() => {}}
                        >
                        <Flex wrap="wrap">
                            <span>可提现金额<Brief style={{color:'red'}}>¥ {this.state.user.balance}</Brief></span>
                        </Flex>
                    </Item>
                    {/* <Item arrow="horizontal" onClick={() => {}} style={{color:'green'}}>
                        <Flex wrap="wrap">
                            <span style={{color:'#00bc12'}}>提现记录</span>
                        </Flex>
                    </Item> */}
                </List>
                <Link to={`/Friends`}>
                    <List style={{marginTop:'15px'}}>
                        <Item arrow="horizontal" onClick={() => {}}>
                            <Flex wrap="wrap">
                                <span>邀请的好友</span>
                            </Flex>
                        </Item>
                    </List>
                </Link>
            </div>

        )
    }
}
export default User;
